<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div class="enroll_body">
      <!-- 考试信息 -->
      <div class="enroll_detail_card">
        <div class="enroll_detail_top_item">
          <!-- <img
            class="enroll_detail_top_img"
            :src="baseAPIUrl + enrollData.image_path"
            alt="封面"
          /> -->
          <img
            class="enroll_detail_top_img"
            :src="baseAPIUrl + enrollData.image_path_two"
            alt="封面"
          />
          <div class="enroll_detail_top_title">{{ enrollData.title }}</div>
        </div>
        <div class="enroll_detail_top_item">
          <div class="enroll_detail_top_time_box">
            <img
              class="enroll_detail_top_icon"
              src="../../assets/image/time_icon01.png"
            />
            <div class="enroll_detail_top_time">
              {{ enrollData.date_text }}
            </div>
          </div>
          <div class="enroll_detail_top_price">￥ {{ enrollData.money }}</div>
        </div>
        <div style="margin-bottom: 0.3rem" class="enroll_detail_top_item_left">
          <img
            class="enroll_detail_top_icon"
            src="../../assets/image/address_icon01.png"
            style="height: auto"
          />
          <div class="enroll_detail_top_address_box">
            <div class="enroll_detail_top_address_detail">
              {{ enrollData.address }}
            </div>
          </div>
        </div>
        <div class="enroll_detail_top_item_left">
          <img
            class="enroll_detail_top_icon"
            src="../../assets/image/count_icon01.png"
            style="height: auto"
          />
          <div class="enroll_detail_top_address_box">
            <div class="enroll_detail_top_address_detail">
              {{ enrollData.count }}人
            </div>
          </div>
        </div>
      </div>
      <!-- 考试介绍 -->
      <div
        class="enroll_detail_card"
        v-if="enrollData.detail != '' || enrollData.notice != ''"
      >
        <div class="enroll_detail_tab_box">
          <div
            :class="[
              tabShowKey == 1
                ? 'enroll_detail_tab enroll_detail_tab_isActive'
                : 'enroll_detail_tab',
            ]"
            @click="changeTabFn(1)"
            v-if="enrollData.detail != ''"
          >
            简介
          </div>
          <div
            :class="[
              tabShowKey == 2
                ? 'enroll_detail_tab enroll_detail_tab_isActive'
                : 'enroll_detail_tab',
            ]"
            @click="changeTabFn(2)"
            v-if="enrollData.notice != ''"
          >
            须知11
          </div>
        </div>
        <div
          class="enroll_detail_tab_content"
          v-show="tabShowKey == 1"
          v-html="enrollData.detail"
        ></div>
        <div
          class="enroll_detail_tab_content"
          v-show="tabShowKey == 2"
          v-html="enrollData.notice"
        ></div>
      </div>
      <!-- 确认报名 -->
      <div class="enroll_detail_bottom">
        <div
          class="enroll_detail_bottom_btn agree_btn"
          :class="[
            agreeKey
              ? 'enroll_detail_bottom_btn agree_btn'
              : 'enroll_detail_bottom_btn',
          ]"
          @click="toPayFn()"
        >
          报名
        </div>
        <!-- <div class="enroll_detail_bottom_clause_box">
          <div
            class="enroll_detail_bottom_check_box agree_icon_box"
            @click="changeAgreeKey()"
          >
          </div>
            
        </div> -->
        <!-- agreeKey
                ? 'enroll_detail_bottom_check_box agree_icon_box'
                : 'enroll_detail_bottom_check_box', -->
        <!-- [ agreeKey ? 'enroll_detail_bottom_check_icon agree_icon' :
            'enroll_detail_bottom_check_icon', -->
      </div>
    </div>
    <div class="dialog_block" v-if="dialogShow">
      <div class="dialog_block_box">
        <img
          class="dialog_block_close"
          src="../../assets/image/close_icon01.png"
          @click="closeDialog()"
        />
        <div class="login_dialog_content">
          <div class="login_dialog_content_title">提示</div>
          <div class="login_dialog_content_title">{{ dialogTitle }}</div>
          <div class="login_dialog_content_tips">
            <img
              class="login_dialog_content_tips_icon"
              src="../../assets/image/warning_icon01.png"
              alt=""
            />
            <div class="login_dialog_content_tips_words">
              {{ dialogTips }}
            </div>
          </div>
          <div class="login_dialog_content_btn" @click="toRegister()">
            {{ dialogBtn }}
          </div>
        </div>
      </div>
    </div>
    <van-dialog
      zIndex="100"
      v-model="dialogshowdig"
      title="招募学员注意事项"
      width="6rem"
      :showConfirmButton="false"
    >
      <mentbaominxuzi></mentbaominxuzi>
      <!-- @isBottom="isBottomFn" -->
      <div class="member_constitution_bottom">
        <div class="member_constitution_btn_b" @click="agreeBtn()">
          <!-- [
            isBottom
              ? 'member_constitution_btn_b'
              : 'member_constitution_btn_w',
          ] -->
          同意
        </div>
        <div class="member_constitution_btn_w" @click="disagreeBtn()">
          不同意
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<style src="../../assets/css/enroll/coachEnrollDetail.css" scoped></style>

<script>
import mentbaominxuzi from "@/components/mentbaominxuzi.vue";
import HomeTop from "@/components/homeTop.vue";
import { MessageBox, Toast } from "mint-ui";
// 引入微信JSSDK
import wx from "weixin-js-sdk";

export default {
  name: "CoachEnrollDetail",
  components: {
    HomeTop,
    mentbaominxuzi,
  },
  data() {
    return {
      baseAPIUrl: this.$store.state.baseAPIUrl,
      topTitle: "报名详情", // 顶部组件参数设置
      enrollId: "", // 报名活动Id
      enrollData: {
        id: "",
        image_path: "",
        title: "",
        enroll_start_time: "",
        enroll_end_time: "",
        date_text: "",
        money: "",
        count: "",
        address: "",
        detail: "",
        notice: "",
      }, // 报名详情数据
      tabShowKey: 1, // 考试介绍选项卡显示
      agreeKey: false, // 是否已阅读
      // agreeBtnShow: true, // 是否显示按钮
      wxJSSDKConfig: {}, // 微信JSSDK配置
      realUrl: "",
      mapData: {
        center: { lng: 0, lat: 0 }, //中心坐标
        zoom: 17, //缩放级别
      }, //地图数据
      dialogShow: false, // 弹框显示
      dialogTitle: "", // 弹框提示文本
      dialogTips: "", // 弹框提示文本
      dialogBtn: "", // 弹框按钮文本
      dialogLink: "", // 弹框按钮跳转
      dialogshowdig: false,
      // isBottom: false,
      ovin_id: "8080",
      is_complete: "",
    };
  },
  created: function () {
    let query = this.$route.query;
    if (query.enrollId != undefined && query.enrollId != "") {
      this.enrollId = query.enrollId;
    }

    if (query.btnKey != undefined && query.btnKey != "") {
      this.agreeBtnShow = query.btnKey;
    }

    this.getDetailDataFn();
    this.getCoachInfo();
    this.realUrl = this.$store.state.baseUrl + this.$route.fullPath;
  },
  methods: {
    getCoachInfo() {
      let url = "/mobile/checkUserInfo";

      this.axios.post(url).then((res) => {
        console.log(res, "res");
        if (res.code == 0) {
          this.is_complete = res.is_complete;
        }
      });
    },
    // 查询报名详情数据
    getDetailDataFn: function () {
      let that = this;
      let url = "/mobile/examDetail";
      let data = {
        exam_id: this.enrollId,
      };
      this.axios
        .post(url, data)
        .then((response) => {
          if (response.code == 0) {
            that.enrollData = response.exam_info;
            if (that.enrollData.detail == "") {
              that.tabShowKey = 2;
            }
            if (that.enrollData.notice == "") {
              that.tabShowKey = 1;
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 切换选项卡
    changeTabFn: function (key) {
      this.tabShowKey = key;
    },
    // // 勾选/取消已阅读
    // changeAgreeKey: function () {
    //   this.agreeKey = !this.agreeKey;
    // },
    // // 设置按钮可用
    // isBottomFn: function (val) {
    //   this.isBottom = val;
    //   console.log(this.isBottom);
    // },
    disagreeBtn() {
      this.dialogshowdig = false;
    },
    agreeBtn() {
      // if (this.isBottom) {
      let that = this;
      // if (this.isBottom) {
      if (that.enrollData.enroll_status == "1") {
        MessageBox({
          message: "报名未开始",
          confirmButtonText: "确定",
        }).then((action) => {
          if (action == "confirm") {
          }
        });
      } else if (that.enrollData.enroll_status == "3") {
        MessageBox({
          message: "报名已经结束",
          confirmButtonText: "确定",
        }).then((action) => {
          if (action == "confirm") {
          }
        });
      } else if (that.enrollData.enroll_status == "2") {
        let url = "/mobile/createEnrollOrder";
        let data = {
          exam_id: that.enrollId,
        };
        that.axios
          .post(url, data)
          .then((response) => {
            if (response.code == 0) {
              that.$router.push({
                name: "CoachEnrollOrderDetail",
                query: {
                  orderId: response.order_id,
                },
              });
            } else {
              Toast({
                message: response.msg,
                duration: 3000,
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
      // } else {
      //   Toast({
      //     message: "请先阅读完章程",
      //     className: "tosat",
      //   });
      //   return false;
      // }
      // }
    },
    // 报名
    toPayFn: function () {
      let key = this.is_complete;
      if (key == "1") {
        this.openDialog();
      } else {
        this.dialogshowdig = true;
      }

      // console.log(that.enrollId, " that.enrollId");

      // MessageBox({
      //   message: "请您阅读《须知》,勾选同意进行报名",
      //   confirmButtonText: "同意",
      //   showCancelButton: true,
      // }).then((action) => {
      //   if (action == "confirm") {
      //     that.agreeKey = true;
      //   }
      // });
    },
    // 调起地图
    openMapFn: function () {
      let that = this;
      this.getWXJSSDKConfigFn().then((res) => {
        if (res) {
          wx.config({
            debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
            appId: that.wxJSSDKConfig.appid, // 必填，公众号的唯一标识
            timestamp: that.wxJSSDKConfig.time, // 必填，生成签名的时间戳
            nonceStr: that.wxJSSDKConfig.password, // 必填，生成签名的随机串
            signature: that.wxJSSDKConfig.signature, // 必填，签名
            jsApiList: ["openLocation"], // 必填，需要使用的 JS 接口列表
          });
          wx.ready(function () {
            let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
            let x = that.mapData.center.lng - 0.0065;
            let y = that.mapData.center.lat - 0.006;
            let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
            let wz = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
            let lon = z * Math.cos(wz);
            let lat = z * Math.sin(wz);
            wx.openLocation({
              latitude: lat, // 纬度，浮点数，范围为90 ~ -90
              longitude: lon, // 经度，浮点数，范围为180 ~ -180。
              name: that.enrollData.address, // 位置名
              address: "", // 地址详情说明
              scale: 25, // 地图缩放级别,整型值,范围从1~28。默认为最大
            });
          });

          wx.error(function (res) {
            if (
              res.errMsg == "config:invalid signature" &&
              res.realAuthUrl[0] != "" &&
              res.realAuthUrl[0] != undefined
            ) {
              that.realUrl = res.realAuthUrl[0];
            }
            // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
          });
        }
      });
    },
    // 获取WXJSSDK配置
    getWXJSSDKConfigFn: function () {
      let that = this;
      let data = {};
      data = {
        url: that.realUrl,
      };
      let url = "/mobile/getjssdkconfig";
      return new Promise(function (resolve, reject) {
        that.axios
          .post(url, data)
          .then((response) => {
            if (response.code == 0) {
              that.wxJSSDKConfig = response.signpackage;
              resolve(true);
            } else {
              Toast({
                message: response.msg,
                duration: 3000,
              });
              resolve(false);
            }
          })
          .catch(function (error) {
            reject(error);
          });
      });
    },
    // 显示弹窗
    openDialog: function () {
      // 完善信息
      this.dialogTitle = "您还没有完善信息";
      this.dialogTips = "请完善信息才能进行报名";
      this.dialogBtn = "去完善";
      this.dialogLink = "CoachImprove";
      this.dialogShow = true;
    },
    // 关闭弹窗
    closeDialog: function () {
      this.dialogShow = false;
    },
    // 前往完善信息

    toRegister: function () {
      this.$router.push({
        name: this.dialogLink,
        query: {
          ovin_id: this.ovin_id,
          enrollId: this.enrollId,
        },
      });
    },
  },
};
</script>
<style scoped>
.member_constitution_btn_b {
  width: 50%;
  margin: 0 auto;
  height: 0.8rem;
  line-height: 0.8rem;
  box-sizing: border-box;
  background-color: #016ffd;
  color: #fff;
  text-align: center;
  border-radius: 0.4rem;
}

.member_constitution_btn_w {
  width: 50%;
  margin: 5% auto;
  height: 0.8rem;
  line-height: 0.8rem;
  box-sizing: border-box;
  border: 0.02rem solid #016ffd;
  background-color: #ffffff;
  color: #016ffd;
  text-align: center;
  border-radius: 0.4rem;
}
</style>
